.container {
  padding: 24px;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  position: relative;

  // 背景特效
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(0, 255, 0, 0.03) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(0, 255, 0, 0.03) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(0, 255, 0, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;

  .title {
    color: #ffffff !important;
    margin: 0 !important;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    .titleIcon {
      margin-right: 12px;
      color: #00ff00;
      font-size: 28px;
    }
  }

  .headerControls {
    display: flex;
    align-items: center;
    gap: 16px;

    .sortControls {
      display: flex;
      align-items: center;

      .sortSelect {
        .ant-select-selector {
          background: rgba(42, 42, 42, 0.8) !important;
          border: 1px solid rgba(68, 68, 68, 0.3) !important;
          color: #cccccc !important;
          border-radius: 6px;
          backdrop-filter: blur(10px);
          transition: all 0.3s ease;

          &:hover {
            border-color: rgba(0, 255, 0, 0.3) !important;
            box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.1);
          }

          &:focus {
            border-color: rgba(0, 255, 0, 0.5) !important;
            box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
          }
        }

        .ant-select-arrow {
          color: #cccccc !important;
          transition: color 0.3s ease;
        }

        &:hover .ant-select-arrow {
          color: #00ff00 !important;
        }

        // 下拉菜单样式
        .ant-select-dropdown {
          background: rgba(26, 26, 26, 0.95) !important;
          border: 1px solid rgba(0, 255, 0, 0.2) !important;
          border-radius: 8px !important;
          backdrop-filter: blur(20px);
          box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(0, 255, 0, 0.1);

          .ant-select-item {
            color: #cccccc !important;
            background: transparent !important;
            border-radius: 4px;
            margin: 2px 4px;
            transition: all 0.3s ease;

            &:hover {
              background: rgba(0, 255, 0, 0.1) !important;
              color: #00ff00 !important;
            }

            &.ant-select-item-option-selected {
              background: rgba(0, 255, 0, 0.15) !important;
              color: #00ff00 !important;
              font-weight: 500;
            }

            &.ant-select-item-option-active {
              background: rgba(0, 255, 0, 0.1) !important;
              color: #00ff00 !important;
            }
          }
        }
      }

      .sortButton {
        color: #cccccc !important;
        background: rgba(42, 42, 42, 0.8) !important;
        border: 1px solid rgba(68, 68, 68, 0.3) !important;
        border-radius: 6px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          color: #00ff00 !important;
          border-color: rgba(0, 255, 0, 0.3) !important;
          background: rgba(0, 255, 0, 0.1) !important;
        }
      }
    }

    .stats {
      .statTag {
        background: rgba(0, 255, 0, 0.1) !important;
        border: 1px solid rgba(0, 255, 0, 0.2) !important;
        color: #00ff00 !important;
        font-weight: 500;
        padding: 8px 16px;
        border-radius: 20px;
        backdrop-filter: blur(10px);
      }
    }
  }
}

.loadingContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  position: relative;
  z-index: 1;

  .loadingText {
    margin-top: 16px;
    color: #cccccc;
    font-size: 16px;
  }
}

.emptyContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  position: relative;
  z-index: 1;

  .empty {
    .ant-empty-description {
      color: #cccccc;
    }
  }
}

.imageGrid {
  position: relative;
  z-index: 1;
  margin-bottom: 32px;
}

.imageCard {
  background: rgba(42, 42, 42, 0.8) !important;
  border: 1px solid rgba(68, 68, 68, 0.3) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);

  &:hover {
    transform: translateY(-4px);
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(0, 255, 0, 0.1);
    border-color: rgba(0, 255, 0, 0.2) !important;
  }

  .imageContainer {
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, rgba(0, 255, 0, 0.05), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }

    &:hover::before {
      opacity: 1;
    }

         .image {
       max-width: 100%;
       max-height: 160px;
       width: auto;
       height: auto;
       object-fit: contain;
       object-position: center;
       transition: transform 0.3s ease;
       cursor: pointer;
       pointer-events: none;
       border-radius: 4px;

       &:hover {
         transform: scale(1.05);
         box-shadow: 0 4px 15px rgba(0, 255, 0, 0.2);
       }
     }
  }

  .imageInfo {
         .imageName {
       color: #ffffff !important;
       font-weight: 500;
       font-size: 12px;
       line-height: 1.3;
       margin-bottom: 6px;
       display: block;
     }

    .imageMeta {
      .metaItem {
        display: flex;
        align-items: center;
        gap: 6px;

                 .metaIcon {
           color: #00ff00;
           font-size: 10px;
         }

         .metaText {
           color: #cccccc !important;
           font-size: 10px;
         }
      }
    }
  }
}

.paginationContainer {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  position: relative;
  z-index: 1;

  .pagination {
    .ant-pagination-item {
      background: rgba(42, 42, 42, 0.8) !important;
      border: 1px solid rgba(68, 68, 68, 0.3) !important;
      color: #cccccc !important;

      &:hover {
        border-color: rgba(0, 255, 0, 0.3) !important;
      }

      &.ant-pagination-item-active {
        background: rgba(0, 255, 0, 0.1) !important;
        border-color: rgba(0, 255, 0, 0.5) !important;
        color: #00ff00 !important;
      }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      background: rgba(42, 42, 42, 0.8) !important;
      border: 1px solid rgba(68, 68, 68, 0.3) !important;
      color: #cccccc !important;

      &:hover {
        border-color: rgba(0, 255, 0, 0.3) !important;
        color: #00ff00 !important;
      }
    }

    .ant-pagination-options {
      .ant-select {
        .ant-select-selector {
          background: rgba(42, 42, 42, 0.8) !important;
          border: 1px solid rgba(68, 68, 68, 0.3) !important;
          color: #cccccc !important;
          border-radius: 6px;
          backdrop-filter: blur(10px);
          transition: all 0.3s ease;

          &:hover {
            border-color: rgba(0, 255, 0, 0.3) !important;
            box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.1);
          }

          &:focus {
            border-color: rgba(0, 255, 0, 0.5) !important;
            box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
          }
        }

        .ant-select-arrow {
          color: #cccccc !important;
          transition: color 0.3s ease;
        }

        &:hover .ant-select-arrow {
          color: #00ff00 !important;
        }

        // 分页下拉菜单样式
        .ant-select-dropdown {
          background: rgba(26, 26, 26, 0.95) !important;
          border: 1px solid rgba(0, 255, 0, 0.2) !important;
          border-radius: 8px !important;
          backdrop-filter: blur(20px);
          box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(0, 255, 0, 0.1);

          .ant-select-item {
            color: #cccccc !important;
            background: transparent !important;
            border-radius: 4px;
            margin: 2px 4px;
            transition: all 0.3s ease;

            &:hover {
              background: rgba(0, 255, 0, 0.1) !important;
              color: #00ff00 !important;
            }

            &.ant-select-item-option-selected {
              background: rgba(0, 255, 0, 0.15) !important;
              color: #00ff00 !important;
              font-weight: 500;
            }

            &.ant-select-item-option-active {
              background: rgba(0, 255, 0, 0.1) !important;
              color: #00ff00 !important;
            }
          }
        }
      }

      .ant-pagination-options-quick-jumper {
        color: #cccccc !important;

        input {
          background: rgba(42, 42, 42, 0.8) !important;
          border: 1px solid rgba(68, 68, 68, 0.3) !important;
          color: #cccccc !important;
          border-radius: 6px;
          backdrop-filter: blur(10px);
          transition: all 0.3s ease;

          &:hover {
            border-color: rgba(0, 255, 0, 0.3) !important;
            box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.1);
          }

          &:focus {
            border-color: rgba(0, 255, 0, 0.5) !important;
            box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
            outline: none;
          }

          &::placeholder {
            color: #888888 !important;
          }
        }
      }
    }
  }
}

.previewModal {
  .ant-modal-content {
    background: rgba(26, 26, 26, 0.95) !important;
    border: 1px solid rgba(0, 255, 0, 0.2) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px);

    .ant-modal-header {
      background: transparent !important;
      border-bottom: 1px solid rgba(68, 68, 68, 0.3) !important;

      .ant-modal-title {
        color: #ffffff !important;
        font-weight: 600;
      }
    }

    .ant-modal-close {
      color: #cccccc !important;

      &:hover {
        color: #00ff00 !important;
      }
    }
  }

     .previewContainer {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 400px;
     position: relative;

     .previewImage {
       max-width: 100%;
       max-height: 70vh;
       border-radius: 8px;
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
       object-fit: contain;
       object-position: center;
       transition: transform 0.3s ease;
       cursor: zoom-in;

       &:hover {
         transform: scale(1.02);
       }

       &.zoomed {
         max-width: none;
         max-height: none;
         width: auto;
         height: auto;
         transform: scale(1);
         cursor: zoom-out;
         
         &:hover {
           transform: scale(1);
         }
       }
     }
   }

   .previewHint {
     text-align: center;
     margin-top: 16px;
     padding: 12px;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 8px;
     border: 1px solid rgba(68, 68, 68, 0.3);

     .hintText {
       color: #cccccc !important;
       font-size: 12px;
       margin: 0;
     }
   }
}

// 响应式设计
@media (max-width: 768px) {
  .container {
    padding: 16px;
  }

  .header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;

    .title {
      font-size: 20px !important;

      .titleIcon {
        font-size: 24px;
      }
    }

    .headerControls {
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
      width: 100%;

      .sortControls {
        width: 100%;
        justify-content: flex-start;
      }
    }
  }

     .imageCard {
     .imageContainer {
       height: 120px;
       
       .image {
         max-height: 120px;
         width: auto;
         height: auto;
         object-fit: contain;
         object-position: center;
       }
     }

     .imageInfo {
       .imageName {
         font-size: 11px;
       }

       .imageMeta {
         .metaItem {
           .metaText {
             font-size: 9px;
           }
         }
       }
     }
   }

  .paginationContainer {
    .pagination {
      .ant-pagination-options {
        display: none;
      }
    }
  }
}

@media (max-width: 480px) {
  .container {
    padding: 12px;
  }

     .imageCard {
     .imageContainer {
       height: 100px;
       
       .image {
         max-height: 100px;
         width: auto;
         height: auto;
         object-fit: contain;
         object-position: center;
       }
     }
    
    .imageInfo {
      .imageName {
        font-size: 10px;
      }
      
      .imageMeta {
        .metaItem {
          .metaText {
            font-size: 8px;
          }
        }
      }
    }
  }
}
